<template>
  <section class="mui-content">
    <header class="mui-bar mui-bar-nav">
      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
      <div class="head-tab">
        <a class="doc-te"
           :class="{active: docActive === 1}"
           href="javascript:"
           @tap="handleDocTe(1)"
        >文档</a>
        <a class="doc-te"
           :class="{active: docActive === 2}"
           href="javascript:"
           @tap="handleDocTe(2)"
        >测试</a>
      </div>
    </header>

    <div class="doc-cont">
      <p class="mh-pd">测试共0个文件</p>
      <ul class="doc-list bg-w">
        <li class="doc-item mh-pd flex-bt" v-for="(item, index) in docList" :key="index">
          <div class="doc-lt">
            <h4 class="tit" v-text="item.title">-</h4>
            <p class="time" v-text="item.time">-</p>
          </div>
          <span class="doc-rt success">未测试</span>

        </li>
      </ul>
    </div>
  </section>
</template>

<script>
  export default {
    name: "document-test",
    data () {
      return {
        docActive: 1,
        docList: [
          // {
          //   id: '1',
          //   title: '如何成为一个优秀的红娘',
          //   time: '2019-01-03',
          //   status: 1
          // },
          // {
          //   id: '2',
          //   title: '红红娘秘籍',
          //   time: '2019-01-03',
          //   status: 1
          // },
          // {
          //   id: '3',
          //   title: '红红娘秘籍',
          //   time: '2019-01-03',
          //   status: 1
          // }
        ]
      }
    },
    methods: {
      handleDocTe (i) {
        this.docActive = i;
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin.scss";
  .mui-bar-nav {
    box-shadow: none;
  }
  .mui-bar {
    position: relative;
    height: 4.5rem;
    background-color: #fff;
    border-bottom: .05rem solid #efefef;
  }
  a.mui-action-back {
    color: #e685aa;
    font-size: 3rem;
  }
  .head-tab {
    @include center()
  }
  .doc-te {
    padding-bottom: .4rem;
    font-size: 1.5rem;
    color: #999;
    &:first-child {margin-right: 3rem;}
  }
  .doc-te.active {
    color: #e685aa;
    border-bottom: .02rem solid #e685aa;
  }
  .doc-item {border-bottom: 1px solid #eee;}
  .doc-lt {
    .tit {
      margin-bottom: .4rem;
      @include sc(1.5rem, #333);
    }
    .time {@include sc(1rem, #999)}
  }
  .success {@include sc(1.2rem, #5da645);}
</style>
